<template>
  <l-select-panel
    v-model="value"
    ref="selectPanel"
    valueKey="f_Id"
    :multiple="false"
    :columns="columns"
    :loadSelectTable="loadTableData"
    :selectedData.sync="multipleSelection"
    @rowClick="rowClick"
  >
    <template v-slot:f_ApplySynopsis="scope">
      <el-popover
        placement="bottom-start"
        title="物料概要"
        width="140"
        trigger="hover"
        v-if="scope.row.f_ApplySynopsis"
        popper-class="erpcase-apply-popover"
      >
        <div slot="reference">
          {{ getSynopsis(scope.row.f_ApplySynopsis)
          }}<i class="el-icon-caret-bottom" />
        </div>
        <div class="popover-list">
          <div
            class="popover-list-item"
            :key="index"
            v-for="(item, index) in scope.row.f_ApplySynopsis.split(',')"
          >
            <p
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 120px;
              "
            >
              {{ item }}
            </p>
          </div>
        </div>
      </el-popover>
    </template>
  </l-select-panel>
</template>
<script>
const api = window.$api.erpcase.apply;
export default {
  name: "l-choose-purchase-apply",
  data() {
    return {
      value: "",
      columns: [
        {
          label: "请购单号",
          prop: "f_Number",
          width: 160,
          align: "left",
          dataType: "encode",
        },
        {
          label: "请购主题",
          prop: "f_Theme",
          minWidth: 120,
          align: "left",
          dataType: "input",
        },
        {
          label: "请购日期",
          prop: "f_ApplyDate",
          width: 100,
          align: "left",
          dataType: "datetime",
          format: "yyyy-MM-dd",
        },
        {
          label: "物品概要",
          prop: "f_ApplySynopsis",
          width: 200,
          align: "left",
        },
        {
          label: "请购部门",
          prop: "f_ApplyDep",
          width: 100,
          align: "left",
          dataType: "department",
        },
        {
          label: "请购人员",
          prop: "f_ApplyPerson",
          width: 100,
          align: "left",
          dataType: "user",
        },
        {
          label: "关联项目",
          prop: "f_RelatedProject",
          width: 120,
          align: "left",
          dataType: "dataItem",
          dataCode: "140",
        },
      ],
      f_Id: ""
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.$refs.selectPanel.init();
    },
    async loadTableData(queryData) {
      queryData.sidx = "f_Number";
      queryData.purchaseStateNot = 2;
      let data = await this.$awaitWraper(api.getPage(queryData));
      return data;
    },
    async getSelectData() {
      let select =  await this.$refs.selectPanel.getSelected(); 
      return select;
    },
    resetForm() {
      this.$refs.selectPanel.reset();
      this.$refs.selectPanel.init();
    },
    rowClick(row) {
      this.$emit("rowClick", row);
    },
    getSynopsis(str) {
      const list = str.split(",");
      if (list.length == 1) {
        return `${list[0].split(":")[0]}`;
      }
      return `${list[0].split(":")[0]}等${list.length}项`;
    },
  },
};
</script>